<template>
  <div class="hashView">
    <!-- 动画蒙层 -->
    <div v-if="isAnimationShow" class="animationmc items-center">
      <!-- 不是第一名的碎裂卡片容器 -->
      <div ref="endCard" class="animationmc-hash-copy"></div>
      <!-- 卡片 -->
      <div
        ref="startCard"
        class="animationmc-hash"
        @animationend="animationEndFn"
      >
        <!-- 背景光环 -->
        <img
          class="animationmc-hash-gh"
          src="/image/lotterymoney/hash-grade-bg.png"
        />
        <!-- 得分卡片 -->
        <img
          class="animationmc-hash-img"
          src="/image/lotterymoney/animationmc-hashbox-icon.svg"
        />
        <!-- hash标题 -->
        <div class="animationmc-hash-title">Hash</div>
        <!-- 得分 -->
        <div class="animationmc-hash-value">{{ pkCardInfo.grade }}</div>
        <!-- 排名 -->
        <div class="animationmc-hash-rank items-center">
          {{ $t("lotteryMoney.depm") }}：
          <span style="color: #dd5c00">
            {{ Number(pkCardInfo.rank) >= 999 ? ">100" : pkCardInfo.rank }}
          </span>
        </div>
      </div>
    </div>
    <!-- 进度条 -->
    <Progress
      class="hashView-progress"
      :curDay="curDay"
      :lottery="lottery"
      :status="activitytStatus"
      :beginTimeTag="beginTimeTag"
      :firstStageEndTimeTag="firstStageEndTimeTag"
      :secondEndTimeTag="secondEndTimeTag"
    ></Progress>
    <!-- 内容部分 -->
    <div class="content">
      <!-- 第一名 和 PK 者 -->
      <div class="header items-center">
        <!-- 标题  -->
        <div class="header-top">
          <img
            style="width: 100%; height: 100%"
            src="/image/lotterymoney/hashpk-title-icon.svg"
          />
          <van-popover
            class="popoverHashView"
            placement="bottom"
            :offset="[0, 6]"
          >
            <div class="popoverHashView-alert">
              {{ $t("lotteryMoney.hxdesctext") }}
            </div>
            <template #reference>
              <div class="header-top-wh"></div>
            </template>
          </van-popover>
        </div>

        <!-- 两个用户 -->
        <div class="header-center items-center">
          <!-- 第一名 -->
          <div class="header-center-left header-center-wh items-center">
            <!-- 背景 -->
            <div
              class="header-center-left-bg"
              :class="{
                'header-center-left-bg-start': isShowFirstNew,
              }"
            >
              <img
                class="header-center-left-bg"
                src="/image/lotterymoney/hashpk-left-icon.svg"
              />
            </div>

            <!-- 击碎-裂缝 -->
            <img
              v-show="openCardFirstUpdate"
              class="header-lh"
              src="/image/lotterymoney/card-lh-icon1.png"
            />
            <!-- 锚点位置 -->
            <div class="header-anchorPosition">
              <slot></slot>
            </div>

            <!-- 信息内容 -->
            <div
              class="header-center-left-animation"
              :class="{ 'header-center-left-animation-start': isShowFirstNew }"
              @animationend="infoOffsetEndFn"
            >
              <!-- old 信息 -->
              <div class="header-center-left-old items-center">
                <div class="header-center-avatarbox items-center">
                  <img
                    class="header-center-avatarbox-bg"
                    src="/image/lotterymoney/hashpk-top1-icon.png"
                  />
                  <ImgNuxt
                    class="header-center-avatarbox-avatar"
                    :src="firstRank ? firstRank.avatar : file.avatarDefault"
                    :placeholder="file.avatarDefault"
                    isHttp
                  ></ImgNuxt>
                </div>

                <div
                  v-if="firstRank && firstRank.teamName"
                  class="header-center-info"
                  style="margin-right: 6px"
                >
                  <div class="header-center-info-name">
                    {{
                      (firstRank &&
                        firstRank.nickname &&
                        firstRank.nickname.substring(0, 11)) ||
                      "--"
                    }}{{
                      firstRank &&
                      firstRank.nickname &&
                      firstRank.nickname.length > 11
                        ? "..."
                        : ""
                    }}
                  </div>

                  <div v-if="firstRank" class="header-center-info-team">
                    {{
                      firstRank.teamConfigId == 1
                        ? $t("lotteryMoney.redTeam1")
                        : firstRank.teamConfigId == 2
                        ? $t("lotteryMoney.yellowTeam1")
                        : $t("lotteryMoney.blueTeam1")
                    }}
                  </div>
                  <div v-else class="header-center-info-team">--</div>
                </div>
                <div
                  v-else
                  class="header-center-info"
                  style="
                    margin-right: 6px;
                    font-size: 12px;
                    color: #fff;
                    width: 50%;
                    text-align: center;
                  "
                >
                  {{ $t("lotteryMoney.kqz") }}
                </div>
              </div>
              <!-- new 信息 -->
              <div class="header-center-left-new items-center">
                <div class="header-center-avatarbox items-center">
                  <img
                    class="header-center-avatarbox-bg"
                    src="/image/lotterymoney/hashpk-top1-icon.png"
                  />
                  <ImgNuxt
                    class="header-center-avatarbox-avatar"
                    :src="
                      firstRankNew ? firstRankNew.avatar : file.avatarDefault
                    "
                    :placeholder="file.avatarDefault"
                    isHttp
                  ></ImgNuxt>
                </div>

                <div
                  v-if="firstRankNew && firstRankNew.teamName"
                  class="header-center-info"
                  style="margin-right: 6px"
                >
                  <div class="header-center-info-name">
                    {{
                      (firstRankNew &&
                        firstRankNew.nickname &&
                        firstRankNew.nickname.substring(0, 11)) ||
                      "--"
                    }}{{
                      firstRankNew &&
                      firstRankNew.nickname &&
                      firstRankNew.nickname.length > 11
                        ? "..."
                        : ""
                    }}
                  </div>
                  <div v-if="firstRank" class="header-center-info-team">
                    {{
                      firstRank.teamConfigId == 1
                        ? $t("lotteryMoney.redTeam1")
                        : firstRank.teamConfigId == 2
                        ? $t("lotteryMoney.yellowTeam1")
                        : $t("lotteryMoney.blueTeam1")
                    }}
                  </div>
                  <div v-else class="header-center-info-team">--</div>
                </div>
                <div
                  v-else
                  class="header-center-info"
                  style="
                    margin-right: 6px;
                    font-size: 12px;
                    color: #fff;
                    width: 50%;
                    text-align: center;
                  "
                >
                  {{ $t("lotteryMoney.kqz") }}
                </div>
              </div>
            </div>
          </div>
          <!-- PK 者 -->
          <div class="header-center-right header-center-wh items-center">
            <img
              class="header-center-right-bg"
              src="/image/lotterymoney/hashpk-right-icon.svg"
            />
            <!-- 独有的标签 -->
            <div class="header-center-right-tag">
              {{ $t("lotteryMoney.zxpkz") }}
            </div>
            <!-- 信息 -->
            <div
              v-if="curRankPK && curRankPK.teamName != '--'"
              class="header-center-info"
            >
              <div class="header-center-info-name">
                {{
                  (curRankPK &&
                    curRankPK.nickname &&
                    curRankPK.nickname.substring(0, 11)) ||
                  "--"
                }}{{
                  curRankPK &&
                  curRankPK.nickname &&
                  curRankPK.nickname.length > 11
                    ? "..."
                    : ""
                }}
              </div>
              <div class="header-center-info-team">
                {{
                  curRankPK.teamConfigId == 1
                    ? $t("lotteryMoney.redTeam1")
                    : curRankPK.teamConfigId == 2
                    ? $t("lotteryMoney.yellowTeam1")
                    : $t("lotteryMoney.blueTeam1")
                }}
              </div>
            </div>
            <div
              v-else
              class="header-center-info"
              style="
                margin-right: 6px;
                font-size: 12px;
                color: #fff;
                width: 50%;
                text-align: center;
              "
            >
              {{ $t("lotteryMoney.kqz") }}
            </div>
            <ImgNuxt
              class="header-center-avatarbox-avatar"
              :src="
                curRankPK
                  ? curRankPK.avatar || file.avatarDefault
                  : file.avatarDefault
              "
              :placeholder="file.avatarDefault"
              isHttp
            ></ImgNuxt>
          </div>
          <!-- PK 图标 -->
          <img
            class="header-center-pk"
            src="/image/lotterymoney/hashpk-pk-icon.png"
          />
        </div>
        <!-- 倒计时 + hash -->
        <div class="header-boottom items-center">
          <div
            v-if="
              isShowFirstNew && firstRankNew && firstRankNew.transactionHash
            "
            class="header-boottom-left"
            @click="showPopupHash(firstRank.transactionHash)"
          >
            hash {{ firstRankNew.transactionHash.substring(0, 2) }}...
            <span class="header-boottom-left-value">{{
              firstRankNew.transactionHash.substring(
                firstRankNew.transactionHash.length -
                  (lottery.hashPk ? lottery.hashPk.hashScoreLength || 1 : 1),
                firstRankNew.transactionHash.length
              )
            }}</span>
          </div>
          <div
            v-else-if="firstRank && firstRank.transactionHash"
            class="header-boottom-left"
            @click="showPopupHash(firstRank.transactionHash)"
          >
            hash {{ firstRank.transactionHash.substring(0, 2) }}...
            <span class="header-boottom-left-value">{{
              firstRank.transactionHash.substring(
                firstRank.transactionHash.length -
                  (lottery.hashPk ? lottery.hashPk.hashScoreLength || 1 : 1),
                firstRank.transactionHash.length
              )
            }}</span>
          </div>
          <div v-else class="header-boottom-left">
            hash
            <span class="header-boottom-left-value" style="margin-left: 3px"
              >--</span
            >
          </div>
          <!-- 倒计时 -->
          <div class="header-boottom-djs">
            <div class="items-center" style="background: #f0f3fa">
              <div class="header-boottom-djs-item header-boottom-djs-item-minw">
                {{ showTime.minutes ? showTime.minutes : "--" }}
              </div>
              <div class="header-boottom-djs-item">:</div>
              <div class="header-boottom-djs-item header-boottom-djs-item-minw">
                {{ showTime.seconds ? showTime.seconds : "--" }}
              </div>
            </div>
          </div>

          <div
            v-if="curRankPK && curRankPK.transactionHash"
            class="header-boottom-right"
            @click="showPopupHash(curRankPK.transactionHash)"
          >
            hash {{ curRankPK.transactionHash.substring(0, 2) }}...
            <span class="header-boottom-right-value">{{
              curRankPK.transactionHash.substring(
                curRankPK.transactionHash.length -
                  (lottery.hashPk ? lottery.hashPk.hashScoreLength || 1 : 1),
                curRankPK.transactionHash.length
              )
            }}</span>
          </div>
          <div v-else class="header-boottom-right">
            hash
            <span class="header-boottom-right-value" style="margin-left: 3px"
              >--</span
            >
          </div>
        </div>
      </div>

      <!-- 第三/四阶段: 人数 -->
      <div
        v-if="activitytStatus == 7 || activitytStatus == 8"
        class="items-center header-betnums-view"
      >
        <img
          class="header-betnums-left"
          src="/image/lotterymoney/hsahnum-left-icon.svg"
        />
        <div class="header-betnums items-center">
          {{
            $t(
              activitytStatus == 7
                ? "lotteryMoney.slzdd"
                : "lotteryMoney.wkopen"
            )
          }}：
          <van-loading
            v-if="
              (lottery.hashPk &&
                activitytStatus == 7 &&
                lottery.hashPk.pendingSyncToChainCount == 0) ||
              (activitytStatus == 8 && lottery.hashPk.pendingOpenCardCount == 0)
            "
            type="spinner"
            size="10"
            color="#fff"
          />
          <span v-else style="font-weight: 900">
            {{
              activitytStatus == 7
                ? lottery.hashPk.pendingSyncToChainCount || 0
                : lottery.hashPk.pendingOpenCardCount || 0
            }}
          </span>
        </div>
        <img
          class="header-betnums-right"
          src="/image/lotterymoney/hsahnum-right-icon.svg"
        />
      </div>
      <!-- 第三/四阶段: 描述 -->
      <div
        v-if="activitytStatus == 7 || activitytStatus == 8"
        class="header-second-desc"
      >
        {{
          $t(
            activitytStatus == 7
              ? "lotteryMoney.xzslzqnxdd"
              : "lotteryMoney.djpkkzddyj"
          )
        }}
      </div>
      <!-- 交易哈希组件 -->
      <VerticalSwipe
        v-if="
          activitytStatus == 1 ||
          activitytStatus == 2 ||
          activitytStatus == 7 ||
          activitytStatus == 8
        "
        class="verticalSwipeView"
        :peoples="lottery.sessionUserCount || 0"
        :hashScoreLength="
          lottery.hashPk ? lottery.hashPk.hashScoreLength || 1 : 1
        "
        :activitytStatus="activitytStatus"
        @lastOpenCard="lastOpenCardCall"
      ></VerticalSwipe>

      <!-- 我的排名 -->
      <!-- <div
        v-if="lottery.hashPk && lottery.hashPk.myMaxHashScore"
        class="rankMy items-center"
      > -->
      <!-- <div class="items-center">
          <ImgNuxt
            class="rankMy-avatar"
            isHttp
            :placeholder="file.avatarDefault"
            :src="avatarMy"
          />
          <div>
            <div class="rankMy-nickname">
              {{ lottery.myNickname || "--" }}
            </div>
          </div>
        </div> -->
      <!-- 最大哈希值 -->
      <!-- <div class="items-center">
          <div class="rankMy-hax">{{ $t("lotteryMoney.hxdfMax") }}:</div>
          <div class="rankMy-btn">
            {{
              lottery.hashPk && lottery.hashPk.myMaxHashScore
                ? lottery.hashPk.myMaxHashScore
                : "--"
            }}
          </div>
        </div> -->
      <!-- <div class="rankMy-rank">
          {{ myMaxHashScoreRank }}
        </div> -->
      <!-- </div> -->
      <!-- 上链中数量显示 -->
      <div class="slz items-center">
        <div class="slz-item items-center">
          <div class="items-center">
            <img class="slz-img" src="/image/lotterymoney/hash-slz-icon.svg" />
            <span class="slz-value">{{
              (lottery.hashPk && lottery.hashPk.pendingSyncToChainCount) || 0
            }}</span>
          </div>
          <div class="slz-text">{{ $t("lotteryMoney.slz") }}</div>
        </div>
        <div class="slz-item items-center">
          <div class="items-center">
            <img class="slz-img" src="/image/lotterymoney/hash-ysl-icon.svg" />
            <span class="slz-value">{{
              (lottery.hashPk && lottery.hashPk.successSyncToChainCount) || 0
            }}</span>
          </div>
          <div class="slz-text">{{ $t("lotteryMoney.ysltext") }}</div>
        </div>
        <!-- 中间的图标 -->
        <img
          class="slz-icon"
          src="/image/lotterymoney/hash-slzcenter-icon.svg"
        />
      </div>
      <!-- 第二阶段: 已下注/当前 PK 人数 ,三四阶段,没有要求展示这两个数值-->
      <div
        v-if="activitytStatus == 2"
        class="slz items-center"
        style="margin-bottom: 0"
      >
        <div class="slz-item items-center">
          <div class="items-center">
            <span class="slz-value">{{
              (lottery.hashPk && lottery.hashPk.hashPkBettingCount) || 0
            }}</span>
          </div>
          <div class="slz-text">{{ $t("lotteryMoney.yxz") }}</div>
        </div>
        <div class="slz-item items-center">
          <div class="items-center">
            <span class="slz-value">{{
              (lottery.hashPk && lottery.hashPk.hashPkUserCount) || 0
            }}</span>
          </div>
          <div class="slz-text">{{ $t("lotteryMoney.dqpkrs") }}</div>
        </div>
      </div>
      <!-- 哈希值弹窗 -->
      <HashValuePopup v-model:show="isShowHash" :hashText="hashText" />
    </div>
  </div>
</template>
<script setup name="hashView">
import { useEventBus } from "@vueuse/core";
import { useUserStore } from "~~/store/modules/user";
import { getOssFileUrl, debounce } from "@/utils";
import HashValuePopup from "./hash-value-popup.vue";
import Progress from "./progress.vue";
import { useLotteryMoneyStore } from "~~/store/modules/lottery-money";
import VerticalSwipe from "./vertical-swipe-pk.vue";

const props = defineProps({
  curDay: Number,
  lottery: Object,
  activitytStatus: Number,
  beginTimeTag: String | Number,
  firstStageEndTimeTag: String | Number,
  secondEndTimeTag: String | Number,
});

/**
 * pk 版本:左边是第一名,右边是当前 pk 者;自测场景:
 * 0. 没有人开卡,显示空数据
 * 1. 只有自己一个人开一注卡,第一名显示自己,pk 者是空数据
 * 2. 只有,其他人一人开一注卡,第一名显示其他人,右边显示空数据
 * 3. 只有自己一个人连续开卡,自己开的第二张卡开始,都现在是右侧 pk 位置
 * 4. 自己开卡后,其他人开卡,pk 者交替显示
 * 5. 自己开卡得第一名,右边显示上一次开卡记录,如果还是自己,且 hash 相同者不展示
 * 6. 其他人开卡得第一名,右边显示上一次开卡记录,如果还是他自己,且 hash 相同者不展示
 * 7. 列表始终显示最近的 5 条开卡记录,不用过滤上面第一名和 pk 者两个信息
 * 8. 这个版本不在调用之前的 topHashScoreRecord 接口
 * */

const emit = defineEmits(["lastPunter", "animationend"]);
const { t } = useI18n();
const lotteryMoneyStore = useLotteryMoneyStore();
const userState = useUserStore();
const firstRank = ref(null); // 第一名
const firstRankNew = ref(null); // 新的,第一名
const curRankPK = ref({
  id: "",
  sid: "",
  transactionHash: "",
  avatar: "",
  nickname: "--",
  teamName: "--",
}); // 当前开卡者

// 更新 curRankPK
const curRankPKUpdate = (val) => {
  if (!val) return;
  // 重复就不添加了
  let isHas = -1;
  const cardId = `${val.id}${val.sid}`;
  isHas = lotteryMoneyStore.$state.openCardIds.findIndex((e) => e == cardId);

  if (isHas >= 0) {
    console.log(cardId, "-0-重复了-0-", val.transactionHash, "--", isHas);
    return;
  }
  // 更新数据
  curRankPK.value = val;
};

// socket 消息推送
const openCardSocket = useEventBus("lotteryMoney-socket-bdcLotteryOpenCard"); // 开卡通知
let openCardSocketOn = openCardSocket.on((val) => {
  if (val.openCardtUser) {
    // 将当前开卡信息,赋值给 pk 者
    curRankPKUpdate(val.openCardtUser);
  }
});

// 上一次开卡,信息记录
const lastOpenCardCall = (val) => {
  // console.log("-lastOpenCardCall-", val);
  if (val) {
    curRankPKUpdate(val.a);
  }
};

/**
 * 监听pkTop4Arr
 * 原因: 监听pkTop4Arr对比lotteryMoney-socket-bdcLotteryOpenCard 通知,的好处就是可以综合 pk 升级和第一名变化两种场景
 * 1. 正常, 第一名变化更新
 * 2. pk 升级场景,第一名变化
 * */
let isBreakUpdateFirst = false; // 自己开卡,动画期间,禁止查询第一名信息
const pkTop4ArrWatch = watch(
  () => lotteryMoneyStore.$state.pkTop4Arr,
  (newVal, oldVal) => {
    console.log(oldVal, "-hashView-pkTop4ArrWatch 变化", newVal);
    let ranks = [];
    if (newVal && newVal.length > 0) {
      ranks = newVal.map((element) => {
        if (element.teamConfigId == 1) {
          element.teamName = t("lotteryMoney.redTeam");
        } else if (element.teamConfigId == 2) {
          element.teamName = t("lotteryMoney.yellowTeam");
        } else if (element.teamConfigId == 3) {
          element.teamName = t("lotteryMoney.blueTeam");
        }
        return element;
      });
    }

    // 比较得出第一名
    if (ranks && ranks.length > 1) {
      if (firstRank.value) {
        if (ranks[0].hashScore.length >= firstRank.value.hashScore.length) {
          if (ranks[0].hashScore.length > firstRank.value.hashScore.length) {
            // 正在动画
            setTimeout(() => {
              if (isBreakUpdateFirst) {
                firstRankNew.value = ranks[0];
              }
              // 没有在做动画
              else {
                // 第一名变更动画: 全体可见
                if (oldVal) {
                  firstRankNew.value = ranks[0];
                  isShowFirstNew.value = true;
                } else {
                  firstRank.value = ranks[0];
                }
              }
            }, 300);
          }
          // 长度相等
          else if (ranks[0].hashScore > firstRank.value.hashScore) {
            // 正在动画
            setTimeout(() => {
              if (isBreakUpdateFirst) {
                firstRankNew.value = ranks[0];
              }
              // 没有在做动画
              else {
                // 第一名变更动画: 全体可见
                if (oldVal) {
                  firstRankNew.value = ranks[0];
                  isShowFirstNew.value = true;
                } else {
                  firstRank.value = ranks[0];
                }
              }
            }, 300);
          }
        }
      } else {
        setTimeout(() => {
          if (isBreakUpdateFirst) {
            firstRankNew.value = ranks[0];
          } else {
            // 第一名变更动画: 全体可见
            if (oldVal) {
              firstRankNew.value = ranks[0];
              isShowFirstNew.value = true;
            } else {
              firstRank.value = ranks[0];
            }
          }
        }, 300);
      }
    } else if (ranks && ranks.length == 1) {
      if (firstRank.value) {
        // 这种基本不会出现
        if (ranks[0].hashScore > firstRank.value.hashScore) {
          // 正在动画
          setTimeout(() => {
            if (isBreakUpdateFirst) {
              firstRankNew.value = ranks[0];
            }
            // 没有在做动画
            else {
              // 第一名变更动画: 全体可见
              if (oldVal) {
                firstRankNew.value = ranks[0];
                isShowFirstNew.value = true;
              } else {
                firstRank.value = ranks[0];
              }
            }
          }, 300);
        }
      } else {
        // 正在动画
        setTimeout(() => {
          if (isBreakUpdateFirst) {
            firstRankNew.value = ranks[0];
          }
          // 没有在做动画
          else {
            // 第一名变更动画: 全体可见
            if (oldVal) {
              firstRankNew.value = ranks[0];
              isShowFirstNew.value = true;
            } else {
              firstRank.value = ranks[0];
            }
          }
        }, 300);
      }
    } else {
      // 未开始状态,展示倒计时需求:调整
      if (
        props.activitytStatus != 2 &&
        props.activitytStatus != 7 &&
        props.activitytStatus != 8
      ) {
        firstRank.value = null;
        firstRankNew.value = null;
        curRankPK.value = {
          id: "",
          sid: "",
          transactionHash: "",
          avatar: "",
          nickname: "--",
          teamName: "--",
        };
      }
    }
  },
  {
    immediate: true,
  }
);

// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

// 头像
// const avatarMy = computed(() => {
//   if (userState.$state.avatar) {
//     return userState.$state.avatar;
//   }
//   return file.avatarDefault;
// });
// 我的排名
// const myMaxHashScoreRank = computed(() => {
//   if (props.lottery.hashPk && props.lottery.hashPk.myMaxHashScoreRank) {
//     if (Number(props.lottery.hashPk.myMaxHashScoreRank) <= 100) {
//       return props.lottery.hashPk.myMaxHashScoreRank;
//     } else {
//       return ">100";
//     }
//   }
//   return ">100";
// });

// 定时器-通知
let unsubscribe = null; // 定时器通知对象
let unsubscribeFns = {}; // 执行的函数数组
const moneyInterval = useEventBus("lottery-money-interval-emit");

// 页面属性
const pageData = reactive({
  activitytStatus: 0, //   1 未开始  2 进行中  3 已结束
  serverTime: 0, // 默认当前时间
});

let drawEndTime = null; // 倒计时结束时间
/************* 第二阶段倒计时 *************/
const theLastTime = ref({
  minutes: 0,
  seconds: 0,
  time: "--:--",
});
/************* 第三阶段倒计时 *************/
const thirdTime = ref({
  minutes: 0,
  seconds: 0,
  time: "--:--",
});
/************* 第四阶段倒计时 *************/
const fourthTime = ref({
  minutes: 0,
  seconds: 0,
  time: "--:--",
});

// 活动样式逻辑状态  0:上线前几天(没有幸运抽奖) 1 未开始  2 进行中(第一阶段,pk下注阶段)  3 已结束 4 重试状态 5 已结束(结算完成) 6 结算中 7 pk上连中 8 pk开卡中
const showTime = computed(() => {
  if (props.activitytStatus == 7) {
    return thirdTime.value;
  } else if (props.activitytStatus == 8) {
    return fourthTime.value;
  } else {
    return theLastTime.value;
  }
});

const updateCountdown = () => {
  if (!props || !props.lottery || !props.lottery.pkEndTime) return;
  // 倒计时-跳出机制
  let isRefrrsh = false;
  // 重置:避免等于 00:00以后就无法更新了
  if (props.activitytStatus == 7) {
    thirdTime.value = {
      minutes: 0,
      seconds: 0,
      time: "--:--",
    };
    // 倒计时结束时间变化
    drawEndTime = props.lottery.hashPk.pkSyncEndTime;
  } else if (props.activitytStatus == 8) {
    fourthTime.value = {
      minutes: 0,
      seconds: 0,
      time: "--:--",
    };
    // 倒计时结束时间变化
    drawEndTime = props.lottery.hashPk.pkOpenEndTime;
    isRefrrsh = false;
  } else {
    theLastTime.value = {
      minutes: 0,
      seconds: 0,
      time: "--:--",
    };
    // 倒计时结束时间变化
    drawEndTime = props.lottery.pkEndTime;
    isRefrrsh = false;
  }

  // 更新倒计时显示
  function updateTime() {
    if (!props || !props.lottery) return;
    // 设置倒计时的初始时间
    let timeLeft = (Number(drawEndTime) - Number(pageData.serverTime)) / 1000;
    // 定义一个函数来格式化时间
    function formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = decimalToLength(seconds % 60, 0);
      return {
        minutes: minutes.toString().padStart(2, "0"),
        seconds: remainingSeconds.toString().padStart(2, "0"),
        time: `${minutes.toString().padStart(2, "0")}:${remainingSeconds
          .toString()
          .padStart(2, "0")}`,
      };
    }
    if (timeLeft < 0) {
      return {
        minutes: "--",
        seconds: "--",
        time: "00:00",
      };
    } else {
      const t = formatTime(timeLeft);
      if (timeLeft > 0) {
        timeLeft--;
        return t;
      } else {
        // 倒计时结束后执行的操作
        return {
          minutes: "--",
          seconds: "--",
          time: "00:00",
        };
      }
    }
  }

  const timeEndFn = () => {
    if (!isRefrrsh) {
      isRefrrsh = true;
      setTimeout(() => {
        emit("lastPunter");
      }, 1000);
    }
  };

  unsubscribeFns["updateCountdown"] = (val) => {
    // console.log("lottery-start-1111-定时器");
    if (pageData.serverTime != val) pageData.serverTime = val;
    if (props.activitytStatus == 2) {
      if (theLastTime.value.time != "00:00") {
        theLastTime.value = updateTime();
      } else {
        timeEndFn(); // 延迟一秒请求最新的数据,如果倒计时,时间没有变,说明结束了
      }
    } else if (props.activitytStatus == 7) {
      if (thirdTime.value.time != "00:00") {
        thirdTime.value = updateTime();
      } else {
        timeEndFn(); // 延迟一秒请求最新的数据,如果倒计时,时间没有变,说明结束了
      }
    } else if (props.activitytStatus == 8) {
      if (fourthTime.value.time != "00:00") {
        fourthTime.value = updateTime();
      } else {
        timeEndFn(); // 延迟一秒请求最新的数据,如果倒计时,时间没有变,说明结束了
      }
    }
  };
};

/**
 * @description: tab 切换,activitytStatus 变更,更新倒计时
 */

watch(
  () => props.activitytStatus,
  (newVal, oldVal) => {
    // console.log(oldVal, "hashView - activitytStatus", newVal);
    if (newVal && props.lottery.hashPk && newVal != oldVal) {
      if (newVal == 7 && props.lottery.hashPk.pkSyncEndTime != drawEndTime) {
        console.log("第三阶段,更新倒计时");
        updateCountdown();
      } else if (
        newVal == 8 &&
        props.lottery.hashPk.pkOpenEndTime != drawEndTime
      ) {
        console.log("第四阶段,更新倒计时");
        updateCountdown();
      }
    }
    // 新版本,直接从第二阶段开始
    if (newVal == 2 && props.lottery.pkEndTime != drawEndTime) {
      console.log("activitytStatus: ", newVal, " 更新倒计时");
      updateCountdown();
    } else if (newVal == 1 && oldVal != 1) {
      console.log("activitytStatus: ", newVal, " 更新倒计时");
      updateCountdown();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

/**
 * @description: 获取第一名信息
 */

// 第一名: 1. 立即更新裂开的样式 2. 停止更新第一名数据
const openCardFirstUpdate = ref(false);
onMounted(() => {
  // 1. 倒计时
  updateCountdown();
  // 2. 统一的定时器,通知,组件加载的时候只初始化一次
  if (!unsubscribe) {
    unsubscribe = moneyInterval.on((val) => {
      if (unsubscribeFns && Object.keys(unsubscribeFns).length > 0) {
        Object.keys(unsubscribeFns).forEach((key) => {
          // console.log("--unsubscribeFns--", key);
          const fn = unsubscribeFns[key];
          if (fn && typeof fn === "function") {
            fn(val);
          }
        });
      }
    });
  }
});

onBeforeUnmount(() => {
  // 1.注销通知
  if (unsubscribe) unsubscribe();
  openCardSocketOn && openCardSocketOn();
  pkTop4ArrWatch && pkTop4ArrWatch();
});

/**
 * @description: 展示哈希弹窗
 * @param {*} val
 */
const isShowHash = ref(false);
const hashText = ref("");
const showPopupHash = debounce(
  (val) => {
    if (val) {
      hashText.value = val;
      isShowHash.value = true;
    }
  },
  700,
  false
);
/************************** 做动画 **************************/
const firstOpenCardEnd = useEventBus("lottery-opencard-first-start/end"); // 第一段动画开始/结束
const isAnimationShow = ref(false); // 展示得分
const isShowFirstNew = ref(false); // 展示新的第一名
const pkCardInfo = ref({});

// 动画状态  status: 1 第一步动画开始  != 1 : object (反之结束,object 代表具体的得分)
firstOpenCardEnd.on((val) => {
  if (val == 1) {
    isBreakUpdateFirst = true;
  } else {
    pkCardInfo.value = val;
    isAnimationShow.value = true;
    console.time("scalegh动画结束");
  }
});
// 第二段动画结束
const startCard = ref();
const endCard = ref();

const createShatterPieces = (container) => {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 9; i++) {
    const piece = document.createElement("img");
    piece.className = "piece";
    piece.src = getOssFileUrl({
      src: `/image/lotterymoney/card-debris${i}-icon.png`,
    }).src;
    // piece.style.backgroundColor = "#4CAF50";
    piece.style.top = `${Math.floor(i / 3) * 33.33}%`;
    piece.style.left = `${(i % 3) * 33.33}%`;
    piece.style.animation = "shatter 0.75s forwards";
    fragment.appendChild(piece);
  }
  container.value.appendChild(fragment);
  container.value.classList.add("broken");
};
// 光环放大动画,结束
const animationEndFn = () => {
  console.timeEnd("scalegh动画结束");
  // 1. 不是第一名
  if (pkCardInfo.value.rank != 1) {
    // 1.1 隐藏原始卡片
    startCard.value.style.display = "none";
    // 1.2
    if (endCard.value) createShatterPieces(endCard);
    // 1.3 关闭蒙层
    setTimeout(() => {
      isAnimationShow.value = false;
      emit("animationend");
      // 2. 还原原始卡片
      // startCard.value.style.display = "none";
    }, 750);
  }
  // 2. 第一名动画
  else {
    setTimeout(() => {
      // 2.1 关闭蒙层
      isAnimationShow.value = false;
      // 2.2 如果是第一名,更新样式
      if (pkCardInfo.value.rank == 1) {
        // 2.1 展示裂痕片
        setTimeout(() => {
          openCardFirstUpdate.value = true;
        }, 100);
        // 2.2 隐藏裂痕图片,展示光晕
        setTimeout(() => {
          openCardFirstUpdate.value = false;
          isShowFirstNew.value = true;
        }, 800);
        // 2.3 更新页面数据: 1. 并列第一,更新数据展示升级 2. 超过当前第一名
        emit("lastPunter");
      }
    }, 600);
  }
};
// 第三段动画结束
const infoOffsetEndFn = () => {
  firstRank.value = firstRankNew.value;
  isShowFirstNew.value = false;
  isBreakUpdateFirst = false; //  继续更新第一名
};
</script>
<style lang="scss" scoped>
.animationmc {
  position: absolute;
  top: -10 * 2px;
  left: 0;
  z-index: 98;
  border-radius: 6 * 2px;
  backdrop-filter: blur(8px) brightness(75%);
  background: #f0f3fad7;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: calc(100% + 10 * 2px);

  &-hash {
    width: 254 * 2px;
    height: 128 * 2px;
    margin-top: -12vh;
    &-copy {
      width: 254 * 2px;
      height: 128 * 2px;
      margin-top: -12vh;
      @keyframes hashflyCopy {
        0% {
          transform: scale(0);
        }

        100% {
          transform: scale(1);
        }
      }
      position: absolute;
      z-index: 9999;
      animation: hashflyCopy 1s ease-in-out 1 forwards;
    }
    &-gh {
      position: absolute;
      z-index: 1;
      top: 50%;
      transform-origin: bottom center;
      transform: translate(0%, -50%);
      width: 100%;
      @keyframes scalegh {
        0% {
          transform: scale(1) translate(0%, -50%);
          opacity: 1;
        }
        50% {
          transform: scale(1.6) translate(0%, -10%);
          opacity: 0.3;
        }
        100% {
          transform: scale(1.6) translate(0%, -1%);
          opacity: 0;
        }
      }
      animation: scalegh 1s linear 0s forwards;
    }
    &-img {
      position: relative;
      z-index: 5;
      width: 100%;
      height: 100%;
    }
    &-value {
      position: absolute;
      z-index: 6;
      left: 52.5%;
      top: 45%;
      text-align: center;
      transform: translate(-50%, -50%);
      color: #dd5c00;
      font-size: 40 * 2px;
      font-weight: 700;
      letter-spacing: 8 * 2px;
    }

    &-title {
      position: absolute;
      z-index: 6;
      top: 3 * 2px;
      left: 50%;
      transform: translate(-50%, 0%);
      color: #fff;
      font-size: 14 * 2px;
      font-weight: 600;
    }
    &-rank {
      position: absolute;
      z-index: 6;
      left: 52.5%;
      bottom: 10 * 2px;
      text-align: center;
      text-wrap: nowrap;
      white-space: nowrap;
      white-space: nowrap;
      transform: translate(-50%, 0%);
      font-size: 15 * 2px;
      font-weight: 590;
      color: #fff;
    }
    @keyframes hashfly {
      0% {
        transform: scale(0);
      }
      25% {
        transform: scale(1);
      }
      75% {
        transform: scale(1);
      }
      100% {
        transform: scale(0);
      }
    }
    position: absolute;
    z-index: 9999;
    animation: hashfly 1.5s ease-in-out 1 forwards;
  }
}
.hashView {
  position: relative;
  top: -10 * 2px;
  background-color: #fff;
  border-radius: 12 * 2px;
  overflow: hidden;
  padding: 10 * 2px;
  padding-bottom: 28 * 2px;
  &-progress {
    // margin-bottom: 8 * 2px;
  }
}
.header {
  position: relative;
  z-index: 9;
  // margin-top: 25 * 2px;
  margin-bottom: 10 * 2px;
  flex-direction: column;
  justify-content: center;
  &-lh {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &-anchorPosition {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    transform: translate(-50%, -50%);
  }
  &-top {
    width: 134 * 2px;
    height: 22 * 2px;
    position: relative;
    &-wh {
      position: absolute;
      top: 0 * 2px;
      right: 26 * 2px;
      width: 22 * 2px;
      height: 22 * 2px;
    }
  }
  &-center {
    position: relative;
    width: 100%;
    margin-bottom: 2 * 2px;

    &-wh {
      width: 50%;
      min-height: 72 * 2px;
      max-height: 72 * 2px;
    }
    &-info {
      position: relative;
      z-index: 9;
      &-name {
        text-align: center;
        color: #fff;
        font-weight: 590;
        font-size: 12 * 2px;
        margin-bottom: 6 * 2px;
        min-width: 80 * 2px;
      }
      &-team {
        color: #fff;
        font-size: 11 * 2px;
        text-align: center;
      }
    }
    &-avatarbox {
      position: relative;
      z-index: 9;
      width: 54 * 2px;
      min-width: 54 * 2px;
      height: 60 * 2px;
      margin-right: 4 * 2px;
      justify-content: center;
      &-avatar {
        position: relative;
        z-index: 9;
        border-radius: 100px;
        overflow: hidden;
        width: 36 * 2px;
        height: 36 * 2px;
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
      &-bg {
        position: absolute;
        z-index: 11;
        top: 0;
        left: 0;
        width: 54 * 2px;

        height: 60 * 2px;
      }
    }

    &-left {
      position: relative;
      margin-right: 2 * 2px;
      flex-direction: column;
      overflow: hidden;

      &-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        &-start::before {
          @keyframes highlight1 {
            0% {
              top: -100%;
              left: -100%;
              transform: rotate(135deg);
            }
            50% {
              top: 100%;
              left: 100%;
              transform: rotate(135deg);
            }
            100% {
              top: 200%;
              left: 200%;
              transform: rotate(135deg);
            }
          }
          content: "";
          position: absolute;
          z-index: 99;
          top: 0%;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0) 25%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 75%
          );
          transform: rotate(90deg);
          animation: highlight1 2.8s infinite;
        }
      }
      &-animation {
        transform: translateY(0px);
        &-start {
          @keyframes infoOffset {
            0% {
              transform: translateY(0px);
            }
            100% {
              transform: translateY(-78px);
            }
          }
          z-index: 9999;
          animation: infoOffset 1s ease-in-out 1 forwards;
        }
      }
      &-old {
        min-height: 72 * 2px;
        max-height: 72 * 2px;
        position: relative;
        z-index: 9;
      }
      &-new {
        min-height: 72 * 2px;
        max-height: 72 * 2px;
        position: relative;
        z-index: 9;
      }
    }
    &-right {
      position: relative;
      margin-left: 2 * 2px;
      justify-content: center;
      &-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &-tag {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9;
        padding: 0px 4 * 2px;
        border-radius: 0px 0px 4 * 2px 4 * 2px;
        background: #2b99fe;
        color: rgba(255, 255, 255, 0.6);
        font-size: 11 * 2px;
        white-space: nowrap;
      }
    }
    &-pk {
      position: absolute;
      z-index: 12;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 38 * 2px;
      height: 38 * 2px;
      border-radius: 100px;
      box-shadow: 0px 0px 20px rgb(136, 136, 136);
    }
  }
  &-boottom {
    position: relative;
    &-left {
      padding-left: 12 * 2px;
      min-width: 162 * 2px;
      height: 20 * 2px;
      line-height: 20 * 2px;
      border-radius: 100px;
      background: linear-gradient(
        89deg,
        #ffc838 0.47%,
        rgba(255, 200, 56, 0) 99.53%
      );
      color: #cc7b00;
      font-size: 12 * 2px;
      &-value {
        margin-left: -4 * 2px;
        font-weight: 590;
        font-size: 14 * 2px;
      }
    }
    &-right {
      padding-right: 12 * 2px;
      text-align: right;
      min-width: 162 * 2px;
      height: 20 * 2px;
      line-height: 20 * 2px;
      border-radius: 100px;
      background: linear-gradient(
        90deg,
        rgba(84, 172, 255, 0) 0%,
        #54acff 100%
      );
      color: #0063c4;
      font-size: 12 * 2px;
      &-value {
        margin-left: -4 * 2px;
        font-weight: 590;
        font-size: 14 * 2px;
      }
    }
    &-djs {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
      border-radius: 0px 0px 4 * 2px 4 * 2px;
      box-shadow: 0px 2 * 2px 8 * 2px 0px rgba(0, 0, 0, 0.25);
      padding: 2 * 2px;
      &-item {
        border-radius: 2 * 2px;
        background: #f0f3fa;
        text-align: center;
        height: 20 * 2px;
        line-height: 20 * 2px;

        font-size: 15 * 2px;
        color: #007bff;
        font-weight: 600;
        &-center {
          margin: 0 4 * 2px;
          line-height: 18 * 2px;
        }
        &-dw {
          margin-left: 2 * 2px;
          font-size: 11 * 2px;
          color: #ced1d9;
        }
        &-minw {
          min-width: 25 * 2px;
        }
      }
    }
  }

  &-betnums {
    position: relative;
    justify-content: center;
    // margin-top: 10 * 2px;
    z-index: 5;
    padding: 4 * 2px 9 * 2px;
    background: #ff9d07;
    border-radius: 4 * 2px;
    color: #fff;
    font-size: 12 * 2px;
    &-view {
      position: relative;
      justify-content: center;
      margin-bottom: 6 * 2px;
    }
    &-left {
      position: relative;
      left: 10 * 2px;
      // margin-top: 10 * 2px;
    }
    &-right {
      position: relative;
      right: 10 * 2px;
      // margin-top: 10 * 2px;
    }
  }
  &-second {
    &-desc {
      text-align: center;
      font-size: 12 * 2px;
      color: #999da7;
      margin-bottom: 10 * 2px;
    }
  }
}

.desc {
  margin: 5 * 2px 0;
  font-size: 11 * 2px;
  text-align: center;
  color: #999da7;
}

.content {
  position: relative;
  top: 28 * 2px;
  margin-bottom: 10 * 2px;
  background-color: #fff;
}

.slz {
  position: relative;
  justify-content: space-between;
  margin-bottom: 10 * 2px;
  &-item {
    justify-content: center;
    flex-direction: column;
    border-radius: 6 * 2px;
    background: #f0f3fa;
    width: 49%;
    padding: 8 * 2px 0 * 2px;
  }
  &-img {
    width: 18 * 2px;
    height: 18 * 2px;
    margin-right: 4 * 2px;
  }
  &-value {
    color: #002853;
    font-size: 13 * 2px;
    font-weight: 600;
  }
  &-text {
    margin-top: 6 * 2px;
    color: #999da7;
    font-size: 12 * 2px;
    font-weight: 400;
  }
  &-icon {
    position: absolute;
    width: 30 * 2px;
    height: 30 * 2px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.rankMy {
  position: relative;
  justify-content: space-between;
  width: 100%;
  // margin-top: 8 * 2px;
  margin-bottom: 10 * 2px;
  padding: 7 * 2px 10 * 2px;
  border-radius: 8 * 2px;
  border: 1px solid rgba(115, 119, 128, 0.15);
  background: linear-gradient(90deg, #e5f2ff 0%, #e5fbff 100%);

  &-rank {
    color: #007bff;
    font-size: 15 * 2px;
    font-weight: 600;
  }

  &-avatar {
    width: 32 * 2px;
    height: 32 * 2px;
    border-radius: 100px;
    overflow: hidden;
    margin-right: 4 * 2px;
  }
  &-hax {
    font-size: 11 * 2px;
    text-align: left;
    margin-right: 3 * 2px;
    color: #999da7;
  }
  &-nickname {
    @include multi-line-omit(1);
    min-width: 98 * 2px;
    max-width: 98 * 2px;
    color: #141924;
    font-size: 12 * 2px;
    font-weight: 600;
    // margin-bottom: 2 * 2px;
    // min-height: 18 * 2px;
  }
  &-team {
    text-align: center;
    width: 36 * 2px;
    color: #007bff;
    font-size: 11 * 2px;
  }

  &-btn {
    font-size: 12 * 2px;
    color: #007bff;
    font-weight: 590;
  }
}
.popoverHashView {
  position: relative;
  background: transparent !important;
  left: 60 * 2px !important;
  &-alert {
    position: relative;
    margin: 0 5vw;
    // max-width: 85vw;
    padding: 6 * 2px 12 * 2px;
    color: #fff;
    font-size: 11 * 2px;
    white-space: pre-wrap;
    background: rgba(10, 31, 106, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 6 * 2px;
    overflow: hidden;
  }
}
</style>
<style lang="scss">
.popoverHashView {
  .van-popover__content {
    background: transparent !important;
    box-shadow: none;
  }
  .van-popover__arrow {
    color: rgba(10, 31, 106, 0.4) !important;
    backdrop-filter: blur(0px) !important;
  }
}
</style>
<!-- // 动画 -->
<style>
@keyframes shatter {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    opacity: 0;
  }
}

.broken .piece:nth-child(1) {
  transform: translate(-180px, -180px) rotate(-45deg);
}
.broken .piece:nth-child(2) {
  transform: translate(0, -180px) rotate(-30deg);
}
.broken .piece:nth-child(3) {
  transform: translate(180px, -180px) rotate(-15deg);
}
.broken .piece:nth-child(4) {
  transform: translate(-180px, 0) rotate(-30deg);
}
.broken .piece:nth-child(5) {
  transform: translate(0, 0) rotate(0deg);
}
.broken .piece:nth-child(6) {
  transform: translate(180px, 0) rotate(15deg);
}
.broken .piece:nth-child(7) {
  transform: translate(-180px, 180px) rotate(45deg);
}
.broken .piece:nth-child(8) {
  transform: translate(0, 180px) rotate(30deg);
}
.broken .piece:nth-child(9) {
  transform: translate(180px, 180px) rotate(15deg);
}

.piece {
  position: absolute;
  width: 115px;
  height: 115px;
  overflow: hidden;
  background-color: inherit;
  transition: transform 2s ease-in-out, opacity 2s ease-in-out;
}
</style>
